<template>
  <div class="first-son">
    <div>
      <template v-for="(e, i) in contents">
        <el-button :key="i">
          {{ e }}
        </el-button>
      </template>
      <el-button @click="increment">自增</el-button>
    </div>
    <div>
      <template v-for="(e, i) in skills">
        <el-button :key="i">
          {{ e }}
        </el-button>
      </template>
      <!--    <el-button @click="() => add('pingpang')">添加</el-button>-->
      <el-button @click="add('pingpang')">添加</el-button>
    </div>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "FirstSon",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
    increLocking: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      sampleD: "value",
      contents: [1, 2, 3],
      skills: ["basketball", "football"],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {
    this.$on("some-queue", this.add);
    // @some-queue=add
    //   this.$refs.first.$emit("click", "hiking");
    //   this.$on("click", this.add);
    //  add("hiking")
  },
  methods: {
    sampleM() {},
    increment() {
      this.contents.push(this.contents[this.contents.length - 1] + 1);
    },
    add(skill) {
      skill && this.skills.push(skill);
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
    increLocking() {
      this.increment();
    },
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.first-son {
  background-color: burlywood;
  //贫css
  //富css
  //border: 4px solid #3e9022;
}
</style>
